<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div>
    <el-container>
      <!-- 头部 -->
      <el-header>
        <div class="header-rigth">
          <img src="@/assets/homelogo.png" alt="" />
        </div>
        <!-- 右边个人详情 -->
        <div class="header-left">
          <div class="avatar">
            <img
              src="https://img2.woyaogexing.com/2022/11/16/612b3a6c2bf8d67f!400x400.jpg"
              alt=""
            />
          </div>
          <div>欢迎您，admin</div>
          <div>退出▼</div>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <!-- 导航 -->
          <el-row class="tac">
            <el-col :span="24">
              <el-menu
                default-active="2"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
              >
                <el-menu-item index="1" @click="$router.push('/home')">
                  <i class="el-icon-house"></i>
                  <span slot="title" >帝可得</span>
                </el-menu-item>
                <!-- 二级导航 -->
                <el-submenu index="2">
                  <template slot="title">
                    <i class="el-icon-s-order"></i>
                    <span>工单管理</span>
                  </template>
                  <el-menu-item-group>
                    <el-menu-item index="2-1" @click="$router.push('/operation')">运营工单</el-menu-item>
                    <el-menu-item index="2-2" @click="$router.push('/operandmain')">运维工单</el-menu-item>
                  </el-menu-item-group>
                </el-submenu>

                <el-submenu index="3">
                  <template slot="title">
                    <i class="el-icon-location-information"></i>
                    <span>点位管理</span>
                  </template>
                  <el-menu-item-group>
                    <el-menu-item index="3-1" @click="$router.push('/regIonal')">区域管理</el-menu-item>
                    <el-menu-item index="3-2" @click="$router.push('/getLevel')">点位管理</el-menu-item>
                    <el-menu-item index="3-3" @click="$router.push('/interlocal')">合作商管理</el-menu-item>
                  </el-menu-item-group>
                </el-submenu>

                <el-submenu index="4">
                  <template slot="title">
                    <i class="el-icon-mobile-phone"></i>
                    <span>设备管理</span>
                  </template>
                  <el-menu-item-group>
                     <el-menu-item index="4-1" @click="$router.push('/vm/index')" >设备管理</el-menu-item>
                    <el-menu-item index="4-2" @click="$router.push('/vm/status')">设备状态</el-menu-item>
                    <el-menu-item index="4-3" @click="$router.push('/vm/type')">设备类型管理</el-menu-item>
                  </el-menu-item-group>
                </el-submenu>

                <el-submenu index="5">
                  <template slot="title">
                    <i class="el-icon-user"></i>
                    <span>人员管理</span>
                  </template>
                  <el-menu-item-group>
                    <el-menu-item index="5-1">人员管理</el-menu-item>
                    <el-menu-item index="5-2">人效统计</el-menu-item>
                    <el-menu-item index="5-3">工作量列表</el-menu-item>
                  </el-menu-item-group>
                </el-submenu>
                <el-submenu index="6">
                  <template slot="title">
                    <i class="el-icon-goods"></i>
                    <span>商品管理</span>
                  </template>
                  <el-menu-item-group>
                  <el-menu-item index="3-1" @click="$router.push('/type')">商品类型</el-menu-item>
                    <el-menu-item index="3-2"  @click="$router.push('/manage')">商品管理</el-menu-item>
                  </el-menu-item-group>
                </el-submenu>
                <!-- 一级导航 -->
                <el-menu-item index="7">
                  <i class="el-icon-sunrise-1"></i>
                  <span slot="title">策略管理</span>
                </el-menu-item>
                <el-menu-item index="8" @click="$router.push('/order/index')">
                  <i class="el-icon-tickets"></i>
                  <span slot="title">订单管理</span>
                </el-menu-item>
                <el-menu-item index="9" @click="$router.push('/report/index')">
                  <i class="el-icon-edit"></i>
                  <span slot="title">对账管理</span>
                </el-menu-item>
              </el-menu>
            </el-col>
          </el-row>
        </el-aside>
        <!-- 主体 -->
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.el-header,
.el-footer {
  background-color: #5373e0;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-header {
  display: flex;
  justify-content: space-between;
  .header-rigth {
    width: 88px;
    height: 35px;
    img {
      margin-top: 15px;
      width: 100%;
    }
  }
  .header-left {
    display: flex;
    justify-content: space-between;
    width: 300px;
    // background: #12a76e;
    color: #fff;
    .avatar {
      width: 40px;
      height: 40px;
      margin-top: 12px;
      margin-left: 20px;
      img {
        border-radius: 50%;
        width: 100%;
      }
    }
  }
}

.el-aside {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  line-height: 200px;
  height: 885px;
}

.el-main {
  background-color: #f8fafd;
  color: #333;
  // text-align: center;
  // line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>
